import React, { FC, useState } from 'react'
import styles from './common.module.scss'
import { Typography, Empty, Table, Tag, Button, Space, Modal, Spin } from 'antd'
import { useTitle } from 'ahooks'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import ListSearch from '../../components/ListSearch'
import useLoadQuestionList from '../../hooks/useLoadQuestionList'
import ListPage from '../../components/ListPage'

const { Title } = Typography
const { confirm } = Modal


const Trash: FC = () => {
  useTitle('回收站')
  const { data = {}, loading } = useLoadQuestionList({isDeleted: true})
  const { list = [], total = 0 } = data

  // 记录选中的数组
  const [selectedIds, setSelectedIds] = useState<string[]>([])

  const tableColumns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
      render: (isPublished: boolean) => {
        return isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
      }
    },
    {
      title: '答卷',
      dataIndex: 'answerCount',
      key: 'answerCount'
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt'
    }
  ]
  function del() {
    confirm({
      title: "确认彻底删除问卷？",
      icon: <ExclamationCircleOutlined />,
      content: "删除以后不可以找回",
      onOk: () => {alert(`删除 ${JSON.stringify(selectedIds)}`)}
    })
  }
  const tableElement = <>
    <div style={{marginBottom: '16px'}}>
      <Space>
        <Button type='primary' disabled={selectedIds.length === 0}>恢复</Button>
        <Button danger disabled={selectedIds.length === 0} onClick={del}>彻底删除</Button>
      </Space>
    </div>
    <Table
      dataSource={list}
      columns={tableColumns}
      rowKey={(q: {_id: string}) => q._id}
      pagination={false}
      rowSelection={{
        type: 'checkbox',
        onChange: (selectedRowKeys) => {
          setSelectedIds(selectedRowKeys as string[])
        }
      }}
    />
  </>
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.centent}>
        <div style={{'textAlign': 'center'}}>
          {loading && <Spin style={{margin: '20px'}} />}
        </div>
        {
          !loading && list.length === 0 && <Empty description="暂无数据" />
        }
        {!loading && list.length > 0 && tableElement}
      </div>
      <div style={{padding: '20px', display: 'flex', justifyContent:'center'}}>
        <ListPage total={total} defaultCurrent={1}/>
      </div>
    </>
  )
}

export default Trash